<!--
 * @Author       : ShiJunJie
 * @Date         : 2022-04-12 17:48:25
 * @LastEditors  : ShiJunJie
 * @LastEditTime : 2022-04-14 14:10:40
 * @FilePath     : /src/layouts/components/Content/LayoutContentBreadcrumb.vue
 * @Descripttion : 面包屑
-->
<template>
  <template v-if="breadcrumbArray.length > 2">
    <a-breadcrumb class="breadcrumb" separator="/">
      <template v-for="(e, i) in breadcrumbArray" :key="i">
        <template v-if="e.meta.bread !== false">
          <a-breadcrumb-item>
            <template v-if="i === 0">
              <router-link to="/">
                <Icon icon="ri:home-3-line" />
              </router-link>
            </template>
            <template v-else-if="breadcrumbArray.length - 1 === i">
              {{ e.title || e.meta.name || e.name }}
            </template>
            <template v-else>
              <router-link :to="e" v-if="e.meta.link !== false">
                {{ e.title || e.meta.name || e.name }}
              </router-link>
              <template v-else>
                {{ e.title || e.meta.name || e.name }}
              </template>
            </template>
          </a-breadcrumb-item>
        </template>
      </template>
    </a-breadcrumb>
  </template>
</template>

<script setup>
import { watch, toRaw } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();

const router = useRouter();
// console.log(route.params);
const routeParams = e => (route.params[e] ? '/' + route.params[e] : e);

const getBreadcrumb = item => {
  const arr = item.filter(e => {
    return e.redirect ? false : true || e.path ? true : false;
  });
  // console.log(arr);
  let arrData = [];
  arr.forEach(e => {
    // let str = ''
    // if (e.path && e.path.indexOf(':') !== -1) {
    //   e.path.split(':').forEach(item => {
    //     str += routeParams(item.replace(/(^:)|(\/$)/g, '')) || item
    //   })
    // }
    // e.path = str || e.path
    arrData.push({ path: e.path, params: route.params });
  });
  return toRaw(arr);
};

let breadcrumbArray = ref(getBreadcrumb(route.matched));
console.log('面包屑', toRaw(breadcrumbArray.value));

watch(
  () => route,
  (item, old) => (breadcrumbArray.value = getBreadcrumb(item.matched)),
  { deep: true }
);
</script>

<style lang="scss" scoped>
.breadcrumb {
  margin-bottom: 15px;
  line-height: 100%;
}
</style>
